import * as React from 'react';
import * as ReactDOM from 'react-dom';
const $ = require("jquery");
// var FixTable = require("../../components/table/FixTable.js");

var Table = React.createClass({
    getDefaultProps: function() {
        return {
            list: [{
                "name": "坑你",
                "typeDisplayName": "电话费",
                "remark": "备注001",
                "name01": "20150505",
                "supplierStepDisplayName": "的说法",
                "id": "10001"
            }, {
                "name": "坑你",
                "typeDisplayName": "电话费",
                "remark": "备注001",
                "name01": "20150505",
                "supplierStepDisplayName": "的说法",
                "id": "10001"
            }, {
                "name": "坑你",
                "typeDisplayName": "电话费",
                "remark": "备注001",
                "name01": "20150505",
                "supplierStepDisplayName": "的说法",
                "id": "10001"
            }, {
                "name": "坑你",
                "typeDisplayName": "电话费",
                "remark": "备注001",
                "name01": "20150505",
                "supplierStepDisplayName": "的说法",
                "id": "10001"
            }],
            param: [{
                "prop": "name",
                "title": "供应商名称"
            }, {
                "prop": "typeDisplayName",
                "title": "供应商类型"
            }, {
                "prop": "remark",
                "title": "备注"
            }, {
                "prop": "name01",
                "title": "创建时间"
            }, {
                "prop": "supplierStepDisplayName",
                "title": "状态"
            }, {
                "prop": "supplierStepDisplayName",
                "title": "操作",
                "dd": true
            }]

        };
    },
    componentDidUpdate: function() {
        if (this.props.list instanceof Array && this.props.list.length > 1) {
            console.info("************************************************" + $(".container-table-info").width() + "  " + $(".container-table-info").height())
        }
        //TableID, FixColumnNumber, width, height
    },
    render: function() {
        var Do = this.props.DoSth;
        var $head = [],
            key, $colum = [],
            i = 0,
            j = 0;

        if (this.props.list instanceof Array && this.props.list.length >= 1) {
            for (; j < this.props.param.length; j++) {
                $head.push(<Th key={j} param={this.props.param[j]}/>);
            }
            for (; i < this.props.list.length; i++) {
                $colum.push(
                    <Column key={i} order={this.props.param} param={this.props.list[i]}>
                            <Do
                                toDetail={this.props && this.props.toDetail || null}
                                toEdit={this.props.toEdit} order={this.props.param}
                                toDelete={this.props && this.props.toDelete || null}
                                toDelivery={this.props && this.props.toDelivery || null}
                                toCheck={this.props && this.props.toCheck || null}
                                toApplyPay={this.props && this.props.toApplyPay || null}
                                toConfirmPay={this.props && this.props.toConfirmPay || null}
                                param={this.props.list[i]}
                            />
                        </Column>
                );
            }
            return (
                <div className="container-table-info">
                        <div className="table">
                            <div className="temp">
                                <table id="ddd">
                                    <thead>
                                    <tr>
                                        {$head}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {$colum}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
            )
        } else {
            return (
                <div className="container-table-info">
                    没有查询到数据
                    </div>
            )

        }


    }
});


var Th = React.createClass({
    render: function() {
        return (
            <th>{this.props.param.title}</th>
        )
    }
})

var Column = React.createClass({
    render: function() {
        var param = this.props.param,
            $cell = [],
            i = 0,
            temp;
        this.props.children.dd = "fuck"
        return (
            <tr>
                    {(() => {
                        for (; i < this.props.order.length; i++) {
                            temp = this.props.order[i]["prop"];
                          /*  console.info(temp);*/
                            if (this.props.order[i]["dd"]) {
                                $cell.push(<td key={i}>{this.props.children}</td>)
                            } else {
                                $cell.push(<Cell param={param[temp]} key={i}></Cell>)
                            }
                        }
                        return (
                            $cell
                        )
                    })()}
                </tr>
        )
    }
})

var Columns = React.createClass({
    render: function() {
        var param = this.props.param,
            $cell = [],
            i = 0,
            temp;
        var dd = this.props.children
            // //console.log("555***********"+JSON.stringify(param))
            ////console.log("order***********"+JSON.stringify(this.props.order))
        for (; i < this.props.order.length; i++) {
            temp = this.props.order[i]["prop"];
            ////console.log(this.props.order[i]["dd"]);
            if (this.props.order[i]["dd"]) {
                //console.log("*************************************")
                //console.log(dd)
                $cell.push(<Cell param={param[temp]} key={i}>
                        {
                            React.Children.map(this.props.children, function (child) {
                                return {child};
                            })
                        }
                    </Cell>)
            } else {
                $cell.push(<Cell param={param[temp]} key={i}></Cell>)
            }

        }
        /*for(var key in param){
             $cell.push(<Cell param={param[]}></Cell>)
             }*/
        return (
            <tr>
                    {$cell}
                </tr>
        )
    }
})

var Cell = React.createClass({
    render: function() {
        return (
            <td>{this.props.param}
                    {
                        React.Children.map(this.props.children, function (child) {
                            return {child};
                        })
                    }
                </td>
        )
    }
})


module.exports = Table;